<!DOCTYPE HTML>
<html>
<head>
    <title>流程设计器</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <link rel="icon" href="/favicon.ico" type="image/x-icon" />
    <link href="Public/testflow/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <link href="Public/testflow//testflow.css" rel="stylesheet" type="text/css" />
    
    <script type="text/javascript" src="Public/testflow/jquery-1.11.2.min.js"></script>
    <script type="text/javascript" src="Public/testflow/bootstrap/dist/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="Public/testflow/layer-v3.1.1/layer.js"></script>
    <script type="text/javascript" src="Public/testflow/jsplumb-2.9.0/dist/jsplumb.js"></script>
    <script type="text/javascript" src="Public/testflow/testflow.js"></script>
</head>
<body>
<!-- 导航栏 -->
<nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" href="#">流程设计器</a>
        </div>
        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
                <li><a href="#">Link</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
                        <i class="icon-th-list icon-white"></i>
                        菜单 <span class="caret"></span>
                    </a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Action</a></li>
                        <li><a href="#">Another action</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">Separated link</a></li>
                    </ul>
                </li>
            </ul>
            <form class="navbar-form navbar-right">
                <button class="btn btn-info" type="button" id="leipi_save">保存设计</button>
                <button class="btn btn-danger" type="button" id="leipi_clear">清空连接</button>
            </form>
        </div>
    </div>
</nav>
<!-- 左侧工具栏 -->
<div class="left-navbar">
    <ul class="left-navbar-ul" id="layoutControls">
        <li class="nav-header">页面布局</li>
        <li class="nav-item">
            <div class="preview" id="cscectable">
                表格<span>拖动</span> 
            </div>
            <template>
                <div class="layout-table" controltype="table" style="width:80px; height:67px;">
                    <table class="table table-bordered" style="height:67px;">
                        <thead></thead>
                        <tbody>
                            <tr class="table-tr">
                                <td></td>
                                <td></td>
                            </tr>
                            <tr class="table-tr">
                                <td></td>
                                <td></td>
                            </tr>
                        </tbody>
                    </table>
                    <div class="ui-resizable-icon" style="z-index: 90;"></div>
                </div>
            </template>
        </li>
        <!-- <li class="nav-item" draggable="true">
            <div class="preview">
                面板<span>拖动</span> 
            </div>
        </li> -->
    </ul>
    <ul class="left-navbar-ul" id="flowControls">
        <li class="nav-header">流程图元素</li>
        <li class="nav-item">
            <div class="flowrow" style="padding: 3px;">
                <div id="csceccircle" class="flowitem-circle flowitem" draggable="true">
                    开始
                </div>
                <template>
                    <div controltype="circle" class="flow-circle flow-shape btn btn-small">
                        开始
                        <span class="jsk-startPoint jskcircle"></span>
                        <div class="ui-resizable-icon" style="z-index: 90;"></div>
                    </div>
                </template>
            </div>
            <div class="flowrow" style="padding: 3px;">
                <div id="csceccontent" class="flowitem-content flowitem" draggable="true">
                    内容
                </div>
                <template>
                    <div controltype="rectange" class="flow-rectange flow-shape btn btn-small">
                        内容
                        <span class="jsk-startPoint jskrectange"></span>
                        <div class="ui-resizable-icon" style="z-index: 90;"></div>
                    </div>
                </template>
            </div>
            <div class="flowrow" style="padding: 3px;">
                <div id="cscecdiamond" class="flowitem-diamond flowitem" draggable="true">
                    <svg width="64" height="36" pointer-events="none" version="1.1" xmlns="http://www.w3.org/1999/xhtml" class="_jsPlumb_connector ">
                        <polygon points="0,18 32,0 64,18 32,36" style="fill:#fff; stroke:#ccc;stroke-width:1"/>
                        <text x="18" y="23" fill="#333" >判断</text>
                    </svg>
                </div>
                <template>
                    <div controltype="diamond" class="flow-diamond">
                        <span>判断</span>
                        <svg style="z-index:-1;" width="128" height="72" version="1.1" xmlns="http://www.w3.org/1999/xhtml" class="_jsPlumb_connector ">
                            <polygon points="0,36 64,0 128,36 64,72" style="fill:#fff; stroke:#ccc;stroke-width:1"/>
                        </svg>
                        <span class="jsk-startPoint jskdiamond"></span>
                        <div class="ui-resizable-icon" style="z-index: 90;"></div>
                    </div>
                </template>
            </div>
        </li>
    </ul>
    
</div>
<!-- 画布，内容框 -->
<div class="flow-wrap">
    <div class="flow-target">
        <!-- <div class="flow-circle flow-shape btn btn-small jtk-managed jtk-draggable jtk-droppable" id="jsPlumb_2_1" style="top: 125px; left: 187px;">
            开始<span class="jsk-startPoint jskcircle"></span>
        </div>
        <div class="flow-rectange flow-shape btn btn-small jtk-managed jtk-draggable jtk-droppable" id="jsPlumb_2_2" style="top: 230px; left: 400px;">
            内容<span class="jsk-startPoint jskrectange"></span>
        </div> -->
        <!-- <div class="flow-circle flow-shape btn btn-small jtk-managed jtk-draggable jtk-droppable" id="jsPlumb_2_99" style="position: absolute; top: 134px; left: 239px;">
            开始<span class="jsk-startPoint jskcircle"></span>
            <div class="ui-resizable-icon" style="z-index: 90;"></div>
        </div> -->
    </div>
</div>

</body>
</html>